<template>
  <div ref="root" class="h-screen">
    <el-watermark class="h-full w-full" content="QianYi-Web">
      <div class="w-full h-full">
        <custom-router-view v-if="route?.meta?.isTopPage" />
        <main-layout v-else />
      </div>
    </el-watermark>
  </div>
</template>

<script lang="ts" setup>
import { type ComponentPublicInstance } from 'vue'
import ColorUtils from '@/utils/ColorUtils'

const MainLayout = defineAsyncComponent(() => import('@/components/layout/MainLayout.vue'))
const CustomRouterView = defineAsyncComponent(
  () => import('@/components/layout/main/CustomRouterView.vue')
)
const route = useRoute()

const root = ref<ComponentPublicInstance | HTMLElement | null>(null)

/**
 * 目前支持使用的颜色
 */
const init = {
  '--el-color-primary': '#409eff',
  '--el-color-primary-light-3': '#79bbff',
  '--el-color-primary-light-5': '#a0cfff',
  '--el-color-primary-light-7': '#c6e2ff',
  '--el-color-primary-light-8': '#d9ecff',
  '--el-color-primary-light-9': '#ecf5ff',
  '--el-color-primary-dark-2': '#337ecc',
  '--el-color-success': '#67c23a',
  '--el-color-success-light-3': '#95d475',
  '--el-color-success-light-5': '#b3e19d',
  '--el-color-success-light-7': '#d1edc4',
  '--el-color-success-light-8': '#e1f3d8',
  '--el-color-success-light-9': '#f0f9eb',
  '--el-color-success-dark-2': '#529b2e',
  '--el-color-warning': '#e6a23c',
  '--el-color-warning-light-3': '#eebe77',
  '--el-color-warning-light-5': '#f3d19e',
  '--el-color-warning-light-7': '#f8e3c5',
  '--el-color-warning-light-8': '#faecd8',
  '--el-color-warning-light-9': '#fdf6ec',
  '--el-color-warning-dark-2': '#b88230',
  '--el-color-danger': '#f56c6c',
  '--el-color-danger-light-3': '#f89898',
  '--el-color-danger-light-5': '#fab6b6',
  '--el-color-danger-light-7': '#fcd3d3',
  '--el-color-danger-light-8': '#fde2e2',
  '--el-color-danger-light-9': '#fef0f0',
  '--el-color-danger-dark-2': '#c45656',
  '--el-color-error': '#f56c6c',
  '--el-color-error-light-3': '#f89898',
  '--el-color-error-light-5': '#fab6b6',
  '--el-color-error-light-7': '#fcd3d3',
  '--el-color-error-light-8': '#fde2e2',
  '--el-color-error-light-9': '#fef0f0',
  '--el-color-error-dark-2': '#c45656',
  '--el-color-info': '#909399',
  '--el-color-info-light-3': '#b1b3b8',
  '--el-color-info-light-5': '#c8c9cc',
  '--el-color-info-light-7': '#dedfe0',
  '--el-color-info-light-8': '#e9e9eb',
  '--el-color-info-light-9': '#f4f4f5',
  '--el-color-info-dark-2': '#73767a',
  '--el-bg-color': '#ffffff',
  '--el-bg-color-page': '#f2f3f5',
  '--el-bg-color-overlay': '#ffffff',
  '--el-text-color-primary': '#303133',
  '--el-text-color-regular': '#606266',
  '--el-text-color-secondary': '#909399',
  '--el-text-color-placeholder': '#a8abb2',
  '--el-text-color-disabled': '#c0c4cc',
  '--el-border-color': '#dcdfe6',
  '--el-border-color-light': '#e4e7ed',
  '--el-border-color-lighter': '#ebeef5',
  '--el-border-color-extra-light': '#f2f6fc',
  '--el-border-color-dark': '#d4d7de',
  '--el-border-color-darker': '#cdd0d6',
  '--el-fill-color': '#f0f2f5',
  '--el-fill-color-light': '#f5f7fa',
  '--el-fill-color-lighter': '#fafafa',
  '--el-fill-color-extra-light': '#fafcff',
  '--el-fill-color-dark': '#ebedf0',
  '--el-fill-color-darker': '#e6e8eb',
  '--el-fill-color-blank': '#ffffff'
}
onMounted(() => {
  ColorUtils.setColor(root, 'primary', '#409EFF')
  ColorUtils.setColor(root, 'success', '#67C23A')
  ColorUtils.setColor(root, 'warning', '#E6A23C')
  ColorUtils.setColor(root, 'danger', '#F56C6C')
  ColorUtils.setColor(root, 'info', '#909399')
  ColorUtils.setColor(root, 'error', '#f56c6c')
})
</script>
<style scoped></style>
